<template>
  <view class="album-detail">
    <u-navbar placeholder
              leftIcon="arrow-left"
              :title="$t('pages_album_detail_detail_msg_4c45f1fd')"
              @leftClick="goBack" />
    
    <view class="detail-content">
      <!-- 专辑头部 -->
      <view class="album-header">
        <image :src="albumData.image" 
               class="album-header-image" 
               mode="aspectFill" />
        <view class="album-header-overlay">
          <view class="album-header-content">
            <text class="album-header-title">{{ albumData.name }}</text>
          </view>
        </view>
      </view>
      
      <!-- 专辑内容 -->
        <view class="album-content" v-html="albumData.content"/>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Album-Detail',
  data() {
    return {
      albumData: {
        id: '',
        name: '',
        content: '',
        image: '',
        status: 0
      }
    }
  },
  onLoad(options) {
	this.albumData = uni.getStorageSync('params')
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    getStatusText(status) {
      const statusMap = {
        0: this.$t('pages_album_album_msg_dca0c13b'),
        1: this.$t('pages_album_album_text_22b4334f'),
        2: this.$t('pages_album_album_msg_0a666759')
      }
      return statusMap[status] || this.$t('pages_album_album_msg_903b25f6')
    },
    getStatusClass(status) {
      const classMap = {
        0: 'status-published',
        1: 'status-draft',
        2: 'status-offline'
      }
      return classMap[status] || 'status-unknown'
    }
  }
}
</script>

<style lang="scss" scoped>
.album-detail {
  background: #f5f5f5;
  min-height: 100vh;
}

.detail-content {
  padding-bottom: 40rpx;
}

.album-header {
  position: relative;
  height: 400rpx;
}

.album-header-image {
  width: 100%;
  height: 100%;
}

.album-header-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 60rpx 24rpx 24rpx;
}

.album-header-content {
  color: #fff;
}

.album-header-title {
  font-size: 36rpx;
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-bottom: 20rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
}

.album-header-meta {
  display: flex;
  justify-content: flex-end;
}

.album-header-status {
  font-size: 24rpx;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  backdrop-filter: blur(10rpx);
}

.album-body {
  background: #fff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.04);
}

.album-content {
  font-size: 30rpx;
  line-height: 1.8;
  color: #333;
  
  :deep(p) {
    margin-bottom: 20rpx;
  }
  
  :deep(img) {
    max-width: 100%;
    height: auto;
    border-radius: 12rpx;
    margin: 20rpx 0;
  }
  
  :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
    margin: 30rpx 0 20rpx 0;
    font-weight: 600;
    color: #222;
  }
  
  :deep(ul), :deep(ol) {
    margin: 20rpx 0;
    padding-left: 40rpx;
  }
  
  :deep(li) {
    margin-bottom: 10rpx;
  }
  
  :deep(blockquote) {
    margin: 20rpx 0;
    padding: 20rpx 30rpx;
    background: #f8f9fa;
    border-left: 6rpx solid #007bff;
    border-radius: 8rpx;
  }
  
  :deep(table) {
    width: 100%;
    border-collapse: collapse;
    margin: 20rpx 0;
  }
  
  :deep(th), :deep(td) {
    border: 1rpx solid #ddd;
    padding: 12rpx;
    text-align: left;
  }
  
  :deep(th) {
    background: #f8f9fa;
    font-weight: 600;
  }
}

.status-published {
  background: #e8f5e8 !important;
  color: #52c41a !important;
}

.status-draft {
  background: #fff7e6 !important;
  color: #fa8c16 !important;
}

.status-offline {
  background: #f5f5f5 !important;
  color: #999 !important;
}

.status-unknown {
  background: #f0f0f0 !important;
  color: #666 !important;
}
::v-deep img, ::v-deep table{
width: 100%;
}
</style>